<template>
  <div class="cart">
    <van-nav-bar :fixed="true" title="购物车" />
    <div class="cartbox">
      <!-- 空 -->
      <div class="kong" v-if="$store.state.cartList.length == 0">
        <van-empty description="空空如也" />
        <div class="btn">去逛逛</div>
      </div>
      <!-- 不为空 -->
      <div v-else>
        <div class="header">
          <span class="tit">上海千城汇</span>
          <span class="editor" @click="editor = !editor">编辑</span>
        </div>
        <div class="content">
          <div
            class="list"
            v-for="list in $store.state.shopList"
            :key="list.id"
          >
            <div class="shopname">
              <div class="img">
                <img :src="list.image" alt="" style="width: 100%" />
              </div>
              <span>{{ list.shopname }}</span>
            </div>
            <div class="goods">
              <div
                v-for="item in $store.state.cartList"
                :key="item.products.id"
              >
                <van-row class="item" v-if="list.id === item.products.shop_id">
                  <van-col span="2" class="flex check"
                    ><van-checkbox
                      v-model="item.is_select"
                      checked-color="#ee0a24"
                    />
                  </van-col>
                  <van-col span="6" class="flex img"
                    ><div class="img-inner">
                      <img
                        :src="item.products.image_path"
                        alt=""
                        style="width: 100%"
                      /></div
                  ></van-col>
                  <van-col span="10" class="name flex"
                    ><div>{{ item.products.name }}</div>
                  </van-col>
                  <van-col span="6" class="flex ctrl">
                    <div class="price">￥{{ item.products.mktprice }}</div>
                    <div class="num" v-if="editor">
                      <van-stepper v-model="item.nums" min="1" max="8" />
                    </div>
                    <div class="num" v-else>
                      <van-icon
                        name="delete-o"
                        @click="$store.dispatch('delItem', item.id)"
                      />
                    </div>
                  </van-col>
                </van-row>
              </div>
            </div>
          </div>
        </div>
        <div class="all">
          <div class="left">
            <van-checkbox
              v-model="$store.getters.totalNum.allSelect"
              @click="changeSelect"
              checked-color="#ee0a24"
            />
            <label>全选</label>
          </div>
          <div class="right">
            <span class="totalPrice"
              >合计：<span class="price"
                >￥{{ $store.getters.totalNum.totalPrice }}</span
              ></span
            ><span class="btn">去结算</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getHome } from "@/api/home";
export default {
  name: "cart",

  data() {
    return {
      list: [],
      allselect: false,
      editor: true,
    };
  },
  methods: {
    changeSelect() {
      this.allselect = !this.allselect;
      this.$store.commit("changeSelect", this.allselect);
    },
  },
  watch: {
    allselect: {
      handler(n) {
        this.changeSelect();
      },
    },
  },

  created() {
    if (localStorage.getItem("islog")) {
      getHome({
        display: "all",
        ids: "",
        method: "cart.getlist",
        token: "94fbfaf98f153545d178e038fc691ec0",
      }).then((res) => (this.list = res.data.data));
    }
  },
};
</script>
<style>
.all {
  display: flex;
}
.van-stepper__minus,
.van-stepper__plus {
  --van-stepper-input-height: 0.4rem;
  background-color: #fff;
}
.van-stepper__input {
  background-color: #fff;
}
</style>
<style scoped>
.all {
  display: flex;
  justify-content: space-between;
  background-color: #fff;

  position: fixed;
  left: 0;
  bottom: 1rem;
  padding-left: 0.2rem;
  height: 0.9rem;
  width: 100%;
  line-height: 0.9rem;
  box-shadow: 0 0 10px #ccc;
}
.all .left,
.all .right {
  display: flex;
  align-items: center;
}
.all .right .btn {
  background-color: #333;
  color: #fff;
  font-size: 0.28rem;
  padding: 0 0.4rem;
}
.all .right .totalPrice {
  padding: 0 0.3rem;
}
.all .right .price {
  color: #ff7159;
}
.cart .cartbox {
  position: absolute;
  top: 0.92rem;
  left: 0;
  bottom: 0.9rem;
  right: 0;
  overflow: auto;
}
.cart .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.32rem 0.4rem;
  font-size: 0.24rem;
}
.cart .list > .shopname {
  padding: 0.1rem 0.2rem;
  font-size: 0.24rem;
  display: flex;
  align-items: center;
  min-height: 0.9rem;
}
.cart .list > .shopname .img {
  width: 0.32rem;
  height: 0.32rem;
  margin: 0.2rem;
}
.kong .btn {
  width: 2rem;
  line-height: 0.72rem;
  margin: 0.42rem auto 0;
  background-color: azure;
  text-align: center;
}
.goods {
  padding: 0.1rem;
}
.goods .item {
  padding: 0.2rem 0;
}
.goods .flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
.goods .ctrl {
  flex-direction: column;
}
.goods .name {
  align-items: flex-start;
  font-size: 0.28rem;
}
.goods .name > div {
  width: 3rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow: hidden;
  color: #333;
}
.goods .ctrl {
  flex-direction: column;
  justify-content: space-between;
  font-size: 0.28rem;
  color: #ff7159 !important;
}

.goods .img .img-inner {
  position: relative;
  width: 1.4rem;
  height: 1.4rem;
  overflow: hidden;
}
.goods .img .img-inner img {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
</style>